<template>
    <div class="page">
        <el-card shadow="never" class="mt-4">
            <el-button type="primary" @click="onAddClick">新增</el-button>
            <div class="mt-4" v-loading="loading">
                <el-table ref="table" :data="data">
                    <el-table-column label="勋章课程兑换码名称" prop="name"/>
                    <el-table-column label="内含兑换码数量" prop="num"/>
                    <el-table-column label="兑换码类型">
                        <template slot-scope="{row}">
                            {{ typeObj[row.type_id] }}
                        </template>
                    </el-table-column>
                    <el-table-column label="此兑换码组是否已分配企业">
                        <template slot-scope="{row}">
                            {{ row.company ? `已分配给企业：${row.company}` : '' }}
                        </template>
                    </el-table-column>
                    <el-table-column label="创建时间">
                        <template slot-scope="{row}">
                            {{ row.created_at | formatTime }}
                        </template>
                    </el-table-column>
                    <el-table-column label="操作">
                        <template slot-scope="{row}">
                            <el-button
                                v-if="row.can_delete"
                                type="text"
                                @click="onDeleteClick(row)"
                                class="red-color">删除</el-button>
                            <el-button type="primary" @click="$router.push({
                                name: 'Medal.Cdkey.Detail',
                                params: { id: row.id }
                            })">查看详情</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
            <div v-if="totalElements > 0" class="footer mt-4 text-center">
                <el-pagination
                    class="center"
                    @size-change="fetchData"
                    @current-change="fetchData"
                    :current-page.sync="form.page"
                    :page-size.sync="form.size"
                    :page-sizes="[10, 25, 50]"
                    layout="total, prev, pager, next, sizes, jumper"
                    :total="totalElements">
                </el-pagination>
            </div>
        </el-card>
    </div>
</template>

<script>

export default {
    components: {
    },
    mixins: [require('@/mixins/CacheQuery').default],
    data() {
        return {
            visible: false,
            loading: false,
            data: [],
            form: {
                page: 1,
                size: 25,
            },
            totalElements: 0,
            typeObj: '',
        };
    },
    methods: {
        onSubmit() {
            this.form.page = 1;
            this.fetchData();
        },
        onResetFilters() {
            this.$refs.form.resetFields();
            this.onSubmit();
        },
        fetchData() {
            this.loading = true;
            API.get('merit_exchange_code_group/page', { params: this.form }).then((res) => {
                this.data = res.content;
                this.totalElements = res.pagination.total;
            }).finally(() => this.loading = false);
        },

        onAddClick(row) {
            const params = row && row.id ? { id: row.id } : undefined;
            this.$router.push({
                name: 'Medal.Cdkey.Form',
                params,
            });
        },

        onDeleteClick(row) {
            $ele.$confirm('是否删除此兑换码？', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning',
            }).then(() => {
                this.loading = true;
                API.delete(`merit_exchange_code_group/${row.id}`).then(() => {
                    this.fetchData();
                    $ele.$message.success('删除成功');
                }).finally(() => this.loading = false);
            }).catch();
        },

        fetchType() {
            this.loading = true;
            API.get('merit_exchange_code_type').then((res) => {
                const typeObj = {};
                for (const item of res) {
                    typeObj[item.id] = `${item.name} ${item.price}`;
                }
                this.typeObj = typeObj;
            }).finally(() => this.loading = false);
        },
    },
    mounted() {
        this.fetchData();
        this.fetchType();
    },
};
</script>

<style lang="scss" scoped>
.page {
    .input-width {
        max-width: 300px;
    }
}
</style>
